<template>
    <!-- 查询条件 -->
    <div>
        角色名称:<el-input v-model="page.RoleName" style="width: 200px"></el-input>&emsp;
        &emsp;&emsp;<el-button :icon="Search" type="primary" @click="GetRouter">搜索</el-button>
        <el-button type="success" :icon="Plus" @click="dialogFormVisible = true">新增角色</el-button>
    </div>
    <!-- 列表显示 -->
    <el-table :header-cell-style="{ height: '100px', fontSize: '15px',color:'black' , backgroundColor: 'antiquewhite' }" :data="tableData" border style="width: 100%">
        <el-table-column prop="roleName" label="角色名称" />
        <el-table-column prop="description" label="角色描述" />
        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
                <el-button v-if="scope.row.deletes == false" :icon="Delete" circle type="danger" size="small" @click=""/>
                <el-button  type="primary" size="small" :icon="Search" circle/>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize" :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    <!-- 对话框新增 -->
    <el-dialog v-model="dialogFormVisible" width="500">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="名称" prop="roleName">
                <el-input v-model="ruleForm.roleName" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="备注" prop="description">
                <el-input v-model="ruleForm.description" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="success" :icon="SuccessFilled"  @click="submitForm(ruleFormRef)">
                    保存
                </el-button>
                <el-button type="danger" :icon="Close" @click="dialogFormVisible = false">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus,
  Setting,
  SuccessFilled,
  Close,
} from '@element-plus/icons-vue'
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
//调用持久化
import { useCounterStore } from '@/stores/counter';
import { fa } from 'element-plus/es/locales.mjs';
const counterStore = useCounterStore();
const route = useRoute();
const router = useRouter();
onMounted(() => {
    GetRouter()
})


const page = reactive({
    RoleName: '',
    pageIndex: 1,
    pageSize: 5,
    totalPage: 1,
    totalCount: 1,
});

const handleSizeChange = (val: any) => {
    console.log(val)
    page.pageSize = val;
    GetRouter();

};

const handleCurrentChange = (val: any) => {
    page.pageIndex = val;
    GetRouter();
};

const dialogFormVisible = ref(false);
const ruleForm = reactive({
    "roleName": "",
    "description": "",
    "createId": counterStore.employeeId,
    "createTime": "2024-11-18T08:59:14.451Z",
    "updateId": 0,
    "updateTime": "2024-11-18T08:59:14.451Z",
    "deleteId": 0,
    "deletes": false,
    "deleteTime": "2024-11-18T08:59:14.451Z"
});

const radio = ref(1);

const formSize = ref<ComponentSize>('default');
const ruleFormRef = ref<FormInstance>();

const rules = reactive<FormRules>({
    name: [{ required: true, message: '必填', trigger: 'blur' }],
    region: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change'
        }
    ]
});
//弹框按钮
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            axios.post('http://localhost:5008/api/RBACs/RolesAdd', ruleForm).then((res) => {
                if (res.data.code == 0) {
                    dialogFormVisible.value = false
                    console.log(res.data.message)
                    GetRouter()
                }
                else {
                    console.log(res.data.message)
                }
            })
        } else {
            console.log('error submit!', fields);
        }
    });
};

const tableData = ref([]);
const GetRouter = () => {
    axios.get('http://localhost:5008/api/RBACs/RolesList', {
        params: {
            RoleName: page.RoleName,
            pageIndex: page.pageIndex,
            pageSize: page.pageSize
        }
    }).then((res) => {

        if (res.data.code == 0) {
            tableData.value = res.data.data
            console.log(res.data.messege)
            page.totalPage = res.data.totalPage
            page.totalCount = res.data.totalCount
        }
        else {
            ElMessage.error(res.data.messege)
        }
    })
}





</script>

<style scoped></style>
